<html>
<head>
<script type="text/javascript" src="/scripts/ajax.js"></script>
<script type="text/javascript">
function removeAllChildrenOfId(id) {
	var element = document.getElementById(id);
	if (!element) return;

	while (element.hasChildNodes()) {
		element.removeChild(element.firstChild);
	}
}
function appendChildToId(id, child) {
	var element = document.getElementById(id);
	if (!element) return;

	element.appendChild(child);
}
function buildGameRow(gameInfo) {
	var gameRow = document.createElement("tr");
	gameRow.appendChild(buildGameCell(document.createTextNode(gameInfo.key.name)));
	gameRow.appendChild(buildGameCell(document.createTextNode(gameInfo.name)));
	gameRow.appendChild(buildGameCell(document.createTextNode(gameInfo.owner.name)));
	gameRow.appendChild(buildGameCell(document.createTextNode(gameInfo.status)));
	gameRow.appendChild(buildGameCell(buildPlayersList(gameInfo.players)));

	gameRow.appendChild(buildGameCell(buildGameButton(gameInfo.key.name, "Edit")));
	gameRow.appendChild(buildGameCell(buildGameButton(gameInfo.key.name, "Delete")));
	return gameRow;
}
function buildGameCell(node) {
	var gameCell = document.createElement("td");
	gameCell.appendChild(node);
	return gameCell;
}
function buildPlayersList(players) {
	var list = "";
	if (!players) return document.createTextNode("null");
	if (!players.length) return document.createTextNode("none");

	for (var i = 0; i < players.length; ++i) {
		if (i != 0) list += ", ";
		var player = players[i];
		list += player.name;
	}
	return document.createTextNode(list);
}
function buildGameButton(id, action) {
	var gameButton = document.createElement("button");
	gameButton.value = id;
	gameButton.appendChild(document.createTextNode(action));
	gameButton.onclick = '"'+ action +'(this)"';
	return gameButton;
}

function loadGames() {
	ajaxRequest("gameInfo.jsp", function(json) {
//	ajaxRequest("games.json", function(json) {
		removeAllChildrenOfId("gameInfo");
		for (var i = 0; i < json.length; ++i) {
			var gameInfo = json[i];
			appendChildToId("gameInfo", buildGameRow(gameInfo));
		}
	});
}
function clearGames() {
	ajaxRequest("gameInfo.jsp?action=clear", function(json) {
		removeAllChildrenOfId("gameInfo");
		for (var i = 0; i < json.length; ++i) {
			var gameInfo = json[i];
			appendChildToId("gameInfo", buildGameRow(gameInfo));
		}
	});
}
function createGame() {
	ajaxRequest("gameInfo.jsp?action=create", function(json) {
		removeAllChildrenOfId("gameInfo");
		for (var i = 0; i < json.length; ++i) {
			var gameInfo = json[i];
			appendChildToId("gameInfo", buildGameRow(gameInfo));
		}
	});
}
</script>
</head>
<body>
<h1>Game Info</h1>
<table border>
<tr>
<th>Id</th>
<th>Name</th>
<th>Owner</th>
<th>Status</th>
<th>Players</th>
</tr>
<tbody id="gameInfo">
</tbody>
</table>

<button onclick="loadGames()"/>Get Games</button>
<button onclick="clearGames()"/>Clear Games</button>
<button onclick="createGame()"/>Create Game</button>
</body>
</html>
